<template>
    <div>
      <div class="card card-custom gutter-b example example-compact" id="companyBody">
        <div class="card-header">
          <div class="card-title">
            <span class="card-icon">              
                <span class="svg-icon svg-icon-2 svg-icon-primary d-block my-2">
                    <svg version="1.1" viewBox="0 0 24 24" height="24px" width="24px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
                        <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
                        <title xmlns="http://www.w3.org/2000/svg">Stockholm-icons / Communication / Urgent-mail</title>
                        <desc xmlns="http://www.w3.org/2000/svg">Created with Sketch.</desc>
                        <defs xmlns="http://www.w3.org/2000/svg"></defs>
                        <g xmlns="http://www.w3.org/2000/svg" id="Stockholm-icons-/-Communication-/-Urgent-mail" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                            <rect id="bound" x="0" y="0" width="24" height="24"></rect>
                            <path d="M12.7037037,14 L15.6666667,10 L13.4444444,10 L13.4444444,6 L9,12 L11.2222222,12 L11.2222222,14 L6,14 C5.44771525,14 5,13.5522847 5,13 L5,3 C5,2.44771525 5.44771525,2 6,2 L18,
                            2 C18.5522847,2 19,2.44771525 19,3 L19,13 C19,13.5522847 18.5522847,14 18,14 L12.7037037,14 Z" id="Combined-Shape" fill="#000000" opacity="0.3"></path>
                            <path d="M9.80428954,10.9142091 L9,12 L11.2222222,12 L11.2222222,16 L15.6666667,10 L15.4615385,10 L20.2072547,6.57253826 C20.4311176,6.4108595 20.7436609,6.46126971 20.9053396,6.68513259 C20.9668779,6.77033951 21,6.87277228 21,6.97787787 L21,17 C21,18.1045695 20.1045695,19 19,19 L5,
                            19 C3.8954305,19 3,18.1045695 3,17 L3,6.97787787 C3,6.70173549 3.22385763,6.47787787 3.5,6.47787787 C3.60510559,6.47787787 3.70753836,6.51099993 3.79274528,6.57253826 L9.80428954,10.9142091 Z" id="Combined-Shape" fill="#000000"></path>
                        </g>
                    </svg>
                </span>
            </span>
            <h3 class="card-label"> 公司信息 </h3>
          </div>
          <div class="card-toolbar">
            <div class="example-tools justify-content-center">
            </div>
          </div>
        </div>
        <div class="card-body">
            <!--begin::div-->
            <div class="m-form m-form--fit m-form--label-align-left m-form--group-seperator-dashed">
                <div class="m-portlet__body">
                    <div class="form-group m-form__group row">
                        <div class="col-md-1">
                            <label class="col-form-label" jEhcLang="name">名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称</label>
                        </div>
                        <div class="col-md-3">
                            <input class="form-control" type="hidden" maxlength="32" v-model="companyForm.xt_company_id">
                            <input class="form-control" type="text" maxlength="50" v-model="companyForm.name" placeholder="请输入">
                        </div>
                    </div>
                    <div class="form-group m-form__group row">
                        <div class="col-md-1">
                            <label class="col-form-label" jEhcLang="tel">电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话</label>
                        </div>
                        <div class="col-md-3">
                            <input class="form-control" type="text" maxlength="20" v-model="companyForm.tel" placeholder="请输入">
                        </div>
                    </div>
                    <div class="form-group m-form__group row">
                        <div class="col-md-1">
                            <label class="col-form-label" jEhcLang="contact">联&nbsp;&nbsp;系&nbsp;&nbsp;人</label>
                        </div>
                        <div class="col-md-2">
                            <input class="form-control" type="text" maxlength="20" v-model="companyForm.contact" placeholder="请输入">
                        </div>
                    </div>
                    <div class="form-group m-form__group row">
                        <div class="col-md-1">
                            <label class="col-form-label" jEhcLang="type">公司性质</label>
                        </div>
                        <div class="col-md-3">
                            <input class="form-control" type="text" maxlength="20" v-model="companyForm.type" placeholder="请输入">
                        </div>
                    </div>
                    <div class="form-group m-form__group row">
                        <div class="col-md-1">
                            <label class="col-form-label" jEhcLang="uptime">成立时间</label>
                        </div>
                        <div class="col-md-2">
                            <el-date-picker
                                v-model="companyForm.uptime"
                                align="left"
                                style="width:150px"
                                type="date"
                                placeholder="选择日期"
                                value-format="yyyy-MM-dd" format="yyyy-MM-dd"
                                :picker-options="pickerOptions">
                            </el-date-picker>
                        </div>
                    </div>
                    <div class="form-group m-form__group row">
                        <div class="col-md-1">
                            <label class="col-form-label" jEhcLang="ceo">总负责人</label>
                        </div>
                        <div class="col-md-2">
                            <input class="form-control" type="text" maxlength="20"  v-model="companyForm.ceo" placeholder="请输入">
                        </div>
                    </div>
                    <div class="form-group m-form__group row">
                        <div class="col-md-1">
                            <label class="col-form-label" jEhcLang="xt_province_c_d">省市区县</label>
                        </div>
                        <div class="col-md-2">
                            <el-select v-model="companyForm.xt_provinceID">
                                <el-option value="">请选择</el-option>
                                <el-option 
                                    v-for="item in provinceList"
                                    :key="item.ID"
                                    :label="item.NAME"
                                    :value="item.ID"></el-option>
                            </el-select>
                        </div>
                        <div class="col-md-2">
                            <el-select v-model="companyForm.xt_cityID">
                                <el-option value="">请选择</el-option>
                                <el-option 
                                    v-for="item in cityList"
                                    :key="item.ID"
                                    :label="item.NAME"
                                    :value="item.ID"></el-option>
                            </el-select>
                        </div>
                        <div class="col-md-2">
                            <el-select v-model="companyForm.xt_districtID">
                                <el-option value="">请选择</el-option>
                                <el-option 
                                    v-for="item in districtList"
                                    :key="item.ID"
                                    :label="item.NAME"
                                    :value="item.ID"></el-option>
                            </el-select>
                        </div>
                        <div class="col-md-2">
                            <input class="form-control" type="text" maxlength="20" v-model="companyForm.address" placeholder="请输入">
                        </div>
                    </div>
                    <div class="form-group m-form__group row">
                        <div class="col-md-1">
                            <label class="col-form-label" jEhcLang="remark">公司简介</label>
                        </div>
                        <div class="col-md-8">
                            <textarea class="form-control" maxlength="500" v-model="companyForm.remark" placeholder="请输入"></textarea>
                        </div>
                    </div>
                </div>
                <div class="m-portlet__foot m-portlet__no-border m-portlet__foot--fit">
                    <div class="m-form__actions m-form__actions--solid">
                        <div class="row">
                            <div class="col m--align-left">
                                <button type="button" class="btn btn-light-success font-weight-bold mr-2" @click="addOrUpdateXtCompany">
                                    <i class="icon-xl fas fa-save"></i> 保 存
                                </button>
                            </div>
                            <div class="col m--align-right">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--end::div-->
            </div>
        </div>
	</div>
</template>
  
<script>
  import { SET_BREADCRUMB } from "@/store/breadcrumbs.module";
  import Swal from "sweetalert2";
  import apiUtil from "@/core/util/apiUtil.js"; 
  import { handleNotify,handleAlert,handleConfirm,showWating,closeWating} from "@/core/util/jehcUtil.js";
  export default {
    data(){
      return{
        provinceList:[],
        cityList:[],
        districtList:[],
        xt_provinceID_:"",
        xt_cityID_:"",
        xt_districtID_:"",
        companyForm:{
            xt_company_id:"",
            name:"",
            tel:"",
            contact:"",
            uptime:"",
            ceo:"",            
            xt_provinceID:"",            
            xt_cityID:"",            
            xt_districtID:"",
            address:"",
            remark:""
        },
        pickerOptions: {
            // disabledDate(time) {//范围不可选
            //     return time.getTime() > Date.now();
            // },
            shortcuts: [{
                text: '今天',
                onClick(picker) {
                    picker.$emit('pick', new Date());
                }
            }, 
            {
                text: '昨天',
                onClick(picker) {
                    const date = new Date();
                    date.setTime(date.getTime() - 3600 * 1000 * 24);
                    picker.$emit('pick', date);
                }
            }, 
            {
                text: '一周前',
                onClick(picker) {
                    const date = new Date();
                    date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', date);
                }
            }]
        },
      }
    },
    components: {
      
    },
    mounted() {
        this.$store.dispatch(SET_BREADCRUMB, [{ title: "公司管理" }]);
        this.initCompany();
        this.initProvinceList();
    },
    watch: {
        "companyForm.xt_provinceID":{//监听字段变化
            handler:function(newVal,old){   
                if(newVal == "" || newVal == undefined || newVal == null){
                    this.cityList = [];
                    this.districtList = [];    
                    this.companyForm.xt_cityID = "";
                    this.companyForm.xt_districtID = "";                 
                }else{
                    if(this.xt_provinceID_ != newVal){
                        this.companyForm.xt_cityID = "";
                        this.companyForm.xt_districtID = ""; 
                        let p_ = this.xt_provinceID_;//原省份值 
                        this.districtList = []; 
                        if(newVal == "" || newVal == undefined || newVal == null){
                            this.cityList = [];
                            this.districtList = [];
                        }else{        
                            this.initCityList();                                   
                            if(null != p_ && undefined !== p_ && "" != p_){
                                this.xt_provinceID_ = "";
                            }                
                        }
                    }     
                }           
                      
            }
        },
        "companyForm.xt_cityID":{//监听字段变化
            handler:function(newVal,old){
                if(newVal == "" || newVal == undefined || newVal == null){
                    this.districtList = [];   
                    this.companyForm.xt_districtID = "";                            
                }else{
                    if(this.xt_cityID_ != newVal){
                        this.companyForm.xt_districtID = "";   
                        let c_ = this.xt_cityID_;//原省份值               
                        if(newVal == "" || newVal == undefined || newVal == null){                        
                            this.districtList = [];
                        }else{
                            this.initDistrictList();
                            if(null != c_ && undefined !== c_ && "" != c_){
                                this.xt_cityID_ = "";
                            }
                        }
                    }  
                }             
            }
        },
    },
    methods:{
        initCompany(){
            showWating({renderBody:"companyBody"});
            apiUtil.get(process.env.VUE_APP_SYS_API+"/xtCompany/get/singel").then(({ data }) => {
                this.xt_provinceID_ = data.data.xt_provinceID;
                this.xt_cityID_ = data.data.xt_cityID;
                this.xt_districtID_ = data.data.xt_districtID;
                this.companyForm = data.data;
                this.initCityList();
                this.initDistrictList();
            });
        },
        initProvinceList(){//读取省份          
            apiUtil.get(process.env.VUE_APP_SYS_API+"/xtCommon/pList").then(({ data }) => {
                this.provinceList = data.data;
            });
        },
        initCityList(){   //读取城市
            let xt_provinceID = this.companyForm.xt_provinceID;     
            this.cityList = [];
            if(null != xt_provinceID && undefined !== xt_provinceID && "" != xt_provinceID){
                apiUtil.get(process.env.VUE_APP_SYS_API+"/xtCommon/cList/"+xt_provinceID).then(({ data }) => {
                    this.cityList = data.data;
                });
            }   
        },
        initDistrictList(){//读取区县
            let xt_cityID = this.companyForm.xt_cityID;  
            this.districtList = [];        
            if(null != xt_cityID && undefined !== xt_cityID && "" != xt_cityID){
                apiUtil.get(process.env.VUE_APP_SYS_API+"/xtCommon/dList/"+xt_cityID).then(({ data }) => {
                    this.districtList = data.data;
                });
            }
        },        
        addOrUpdateXtCompany(){
            console.log("companyForm",this.companyForm); 
            if(this.companyForm.name === ""){
                handleAlert("请输入名称", "warning", 3)
                return;
            }
            if(this.companyForm.xt_company_id === ""){
                handleAlert("公司id不存在", "warning", 3)
                return;
            }
            // 保存前提示
            this.$confirm("确定保存?", "提示", {type: "warning",}).then(() => {
                showWating({renderBody:"companyBody",message:"正在操作中，请稍后..."});
                apiUtil.post(process.env.VUE_APP_SYS_API+"/xtCompany/addOrUpdate", this.companyForm).then(({ data }) => {
                    if(data.success){
                        handleAlert("保存公司成功", "success", 3);
                    }else {
                        handleAlert("保存公司失败", "error", 3);
                    }            
                });
            }).catch(()=>{});//注意这里，这里是重点！！！;   
        }
    }
  };
</script>